<!-- 营销管理-商品上下架 -->
<template>
    <div>
        <el-card style="max-width: 100%;">
            <search-box :tableDataInput="tableData" @search="handleSearch"></search-box>
            <span style="position: absolute;left: 550px;top: 112px;color: rgb(191, 202, 222);"
                v-if="BatchOperationButton">已选：{{BatchOperationLength}}</span>
            <el-button class="btn2" @click="BatchOperation(2)">下架</el-button>
            <el-button class="btn1" @click="BatchOperation(1)">上架</el-button>
            <el-table :data="selectedItems" style="font-size: 16px;position: relative;top:-20px;"
                :header-cell-style="{ background: '#EBEEF2' }" @selection-change="checkBox">
                <el-table-column type="selection" align="center" />
                <el-table-column prop="pic" label="商品图片" align="center" width="130px">
                    <template #default="scope">
                        <el-image style="width: 102px; height: 70px;border-radius: 10px;" :src="
                                        scope.row.pic?scope.row.pic:''"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="commodityName" label="商品名称" align="center" />
                <el-table-column prop="subTitle" label="副标题" align="center" />
                <el-table-column prop="productSn" label="货号" align="center" />
                <el-table-column prop="spData" label="商品属性" width="150%" :show-overflow-tooltip="true" align="center">
                    <template slot-scope="scope">
                        <div>
                            <span v-for="(attr, index) in formatAttributes(scope.row.spData)" :key="index">
                                {{ attr }}
                                <span v-if="index < formatAttributes(scope.row.spData).length - 1">，</span>
                            </span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="commodityUnit" label="计量单位" align="center" />
                <el-table-column prop="stockNumber" label="库存数量" align="center">
                    <template #default="scope">
                        {{scope.row.stockNumber}}
                    </template>
                </el-table-column>
                <el-table-column prop="number" label="预警数量" align="center" />
                <el-table-column prop="fixPrice" label="零售单价" align="center">
                    <template #default="scope">
                        <div v-if="scope.row.fixPrice == 0">面议</div>
                        <div v-else>{{ scope.row.fixPrice }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="publishStatus" label="上下架状态" align="center">
                    <template #default="scope">
                        <div v-if="scope.row.publishStatus == 1">上架</div>
                        <div v-if="scope.row.publishStatus == 0 || scope.row.publishStatus == 2"  style="color: rgb(167, 180, 204);">下架</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="400%">
                    <template slot-scope="scope">
                        <div>
                            <span v-if="scope.row.publishStatus == 1" @click="undercarriage(scope.$index,scope.row,2)">
                                <img src="../../assets/marketing/undercarriage.svg" class="undercarriage">
                                下架
                            </span>
                            <span v-if="scope.row.publishStatus == 0 || scope.row.publishStatus == 2" @click="undercarriage(scope.$index,scope.row,1)">
                                <img src="../../assets/marketing/gounding.svg" class="gounding">
                                上架
                            </span>
                            <span @click="setsubtitle(scope.$index,scope.row)">
                                <img src="../../assets/marketing/setSubtitle.svg" class="setsubtitle">
                                <span>设置副标题</span>
                            </span>
                            <span @click="earlyWarning(scope.$index,scope.row)">
                                <img src="../../assets/marketing/earlyWarning.svg" class="earlyWarning">
                                <span>库存预警设置</span>
                            </span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-pagination
            background
            layout="->,prev, pager,next,total"
            :page-size="10"
            :total="tableDataLength"
            @current-change="handleCurrentChange"
            style="margin-top: 20px;">
        </el-pagination>
    </div>
</template>

<script>
import '@/styles/tableList.css';
import { getProductsPricelist,updateBatchPublishStatus,updatePublishStatus,setSubTitle } from '@/api/api.js'
    export default {
        data() {
            return {
                selectedItems: [],
                tableData: [],
                tableDataLength: 0,
                productsPricelistdeatil:{
                    name:'',
                    pageNo: 1
                },
                BatchOperationButton: false,
                BatchOperationLength: 0,
                BatchOperationL: []
            }
        },
        async created() {
            await this.getProductsUDlist(this.productsPricelistdeatil)
        },
        methods: {
            async getProductsUDlist(data) {
                try {
                    const res = await getProductsPricelist(data)
                    console.log(res)
                    if (res.data.code == 200) {
                        console.log(res.data.result.records)
                        this.selectedItems = res.data.result.records;
                        this.tableData = res.data.result.records;
                        this.tableDataLength = res.data.result.total;
                    }
                } catch (error) {
                    console.log(error)
                }                
            },
            handleCurrentChange(val){
                this.productsPricelistdeatil.pageNo = val
                this.getProductsUDlist(this.productsPricelistdeatil)
                this.currentpageNumber = val
            },
            formatAttributes(attributes) {
                let parsedAttributes = [];
                try {
                    parsedAttributes = JSON.parse(attributes);
                } catch (e) {
                    console.error('Error parsing attributes:', e);
                }

                if (Array.isArray(parsedAttributes)) {
                    return parsedAttributes.map(attr => `${attr.key}:${attr.value}`);
                } else {
                    return [];
                }
            },
            checkBox(selection){
                if (selection.length >= 1) {
                    this.BatchOperationButton = true
                    this.BatchOperationLength = selection.length
                    this.BatchOperationL = selection
                } else this.BatchOperationButton = false
            },
            BatchOperation(status){
                if(this.BatchOperationL.length === 0){
                    this.$message({
                        message: '请需要操作的商品',
                        type: 'warning'
                    })
                    return
                }
                const data = this.BatchOperationL.map(item => ({
                    commodityId:item.commodityId,
                    publishStatus:status,
                    skuCode:item.skuCode
                }))
                this.$confirm('是否确定将选择的商品批量'+(status == 1 ? "上架":"下架")+"?", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    updateBatchPublishStatus(data).then((res)=>{
                        if(res.data.code == 200){
                            this.$message({
                                message: '操作成功',
                                type: 'success'
                            })
                            this.getProductsUDlist(this.productsPricelistdeatil)
                        }
                    })
                }).catch((error) => {
                    console.log(error)
                })

            },
            handleSearch(name) {
                this.productsPricelistdeatil.name = name
                this.getProductsUDlist(this.productsPricelistdeatil)
                // this.selectedItems = filtered;
            },
            undercarriage(index, row,status) {
                this.$confirm('是否确定将该商品'+(status == 1 ? "上架":"下架")+"?", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    updatePublishStatus(row.commodityId,status,row.skuCode).then((res)=>{
                        if(res.data.code == 200){
                            status == 1 ? row.publishStatus = 1 : row.publishStatus = 2
                            this.$message({
                                message: '操作成功',
                                type: 'success'
                            })
                        }
                    })
                }).catch(()=>{
                      
                })
            },
            setsubtitle(index, row) {
                this.$prompt('请输入该商品的副标题', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputValue: row.subTitle
                        }).then(({ value }) => {
                            setSubTitle(row.commodityId,row.skuCode,value).then((res)=>{
                                if(res.data.code == 200){
                                    this.$message({
                                        type: 'success',
                                        message: '设置成功'
                                    });
                                    row.subTitle = value
                                }
                            })
                        }).catch(() => {

                        })
            },
            earlyWarning(index, row) {
                console.log(index)//所点击的为第几列
                console.log(row)//所点击的这一列的数据
                this.$message({
                    message: '库存预警设置',
                    type: 'success'
                })
            },
        }
    }
</script>

<style scoped>
    .input1 {
        font-size: 16px;
        width: 241px;
        opacity: 1;
        border-radius: 80px;
        background: rgb(153, 155, 158);
    }

    .input1>>>input.el-input__inner {
        background: rgba(235, 238, 242, 1);
        border-radius: 20px;
    }

    .btn1 {
        position: relative;
        float: right;
        top:-40px;
        right: 10px;
        opacity: 1;
        border-radius: 80px;
        width: 130px;
        height: 38px;
        color: white;
        font-size: 15px;
        background: rgba(126, 114, 242, 1);
    }

    .btn2 {
        position: relative;
        float: right;
        top:-40px;
        text-align: center;
        opacity: 1;
        border-radius: 80px;
        width: 130px;
        height: 38px;
        line-height: 15px;
        font-size: 15px;
    }

    .undercarriage {
        width: 13.2px;
        height: 12px;
        margin-right: 4px;
    }

    .gounding {
        width: 13.2px;
        height: 12px;
        margin-right: 4px;
    }

    .setsubtitle {
        width: 13.2px;
        height: 12px;
        margin-left: 40px;
        margin-right: 4px;
    }

    .earlyWarning {
        width: 13.2px;
        height: 12px;
        margin-left: 40px;
        margin-right: 4px;
    }
</style>